<template>
  <div class="container">
    <div class="header">
      <div class="title">典型工业设备和产品检测监测云服务平台</div>
    </div>
    <div class="body">
      <div class="col-container equ">
        <div class="equ-card" style="height: 60%">
          <div class="title">机电设备</div>
          <div class="equ-info">
            <div
              class="img"
              :class="(equMouseOn == '起重机械'||equSelected=='起重机械') ? 'active' : 'in-active'"
              @click="equChange('起重机械')"
            >
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/qzjx0.png"
                @mouseover="imgActive('起重机械')"
                v-if="this.equSelected != '起重机械'&&this.equMouseOn!='起重机械'"
              />
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/qzjx1.png"
                @mouseleave="imgInActive('起重机械')"
                v-if="this.equSelected == '起重机械'||this.equMouseOn=='起重机械'"
              />
              <div class="title" style="left: 35px">起重机械</div>
            </div>
            <div class="num-info">
              <div class="info-row">
                <div class="type">设备数量</div>
                <div class="number">5998</div>
                <div class="unit">台</div>
              </div>
              <div class="info-row">
                <div class="type">使用单位</div>
                <div class="number">1999</div>
                <div class="unit">家</div>
              </div>
              <div class="info-row">
                <div class="type">制造企业</div>
                <div class="number">399</div>
                <div class="unit">家</div>
              </div>
            </div>
          </div>
          <div class="equ-info">
            <div
              class="img"
              :class="(equSelected == '电气控制柜'||equMouseOn=='电气控制柜') ? 'active' : 'in-active'"
              @click="equChange('电气控制柜')"

            >
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/dqkzg0.png"
                @mouseover="imgActive('电气控制柜')"
                v-if="this.equSelected != '电气控制柜'&&this.equMouseOn!='电气控制柜'"
              />
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/dqkzg1.png"
                @mouseleave="imgInActive('电气控制柜')"
                v-if="this.equSelected == '电气控制柜'||this.equMouseOn=='电气控制柜'"
              />
              <div class="title">电气控制柜</div>
            </div>
            <div class="num-info">
              <div class="info-row">
                <div class="type">设备数量</div>
                <div class="number">30</div>
                <div class="unit">台</div>
              </div>
              <div class="info-row">
                <div class="type">使用单位</div>
                <div class="number">1</div>
                <div class="unit">家</div>
              </div>
              <div class="info-row">
                <div class="type">制造企业</div>
                <div class="number">1</div>
                <div class="unit">家</div>
              </div>
            </div>
          </div>
        </div>
        <div class="equ-card" style="height: 30%; margin-top: 59px">
          <div class="title">储运设备</div>
          <div class="equ-info">
            <div
              class="img"
              :class="(equSelected == '储罐'||equMouseOn=='储罐') ? 'active' : 'in-active'"
              @click="equChange('储罐')"

            >
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/cg0.png"
                @mouseover="imgActive('储罐')"
                v-if="this.equSelected != '储罐'&&this.equMouseOn!='储罐'"
              />
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/cg1.png"
                @mouseleave="imgInActive('储罐')"
                v-if="this.equSelected == '储罐'||this.equMouseOn=='储罐'"
              />
              <div class="title" style="left: 50px">储罐</div>
            </div>
            <div class="num-info">
              <div class="info-row">
                <div class="type">设备数量</div>
                <div class="number">146</div>
                <div class="unit">台</div>
              </div>
              <div class="info-row">
                <div class="type">使用单位</div>
                <div class="number">23</div>
                <div class="unit">家</div>
              </div>
              <div class="info-row">
                <div class="type">制造企业</div>
                <div class="number">30</div>
                <div class="unit">家</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-container map">
        <div class="map-card">
          <div id="geo-graph-homepage" style="width: 70%; height: 110%"></div>
        </div>
        <div class="btns-card">
          <div class="item">
            <div class="circle" style="background-color: #c55a11">检</div>
            <div class="info">
              <div class="type">服务检验</div>
              <div class="number">{{ fourTypeData["检验"] }}</div>
              <div class="unit">家</div>
            </div>
          </div>
          <div class="item">
            <div class="circle" style="background-color: #009242">用</div>
            <div class="info">
              <div class="type">服务用户</div>
              <div class="number">{{ fourTypeData["用户"] }}</div>
              <div class="unit">家</div>
            </div>
          </div>
          <div class="item">
            <div class="circle" style="background-color: #0070c0">制</div>
            <div class="info">
              <div class="type">服务制造</div>
              <div class="number">{{ fourTypeData["制造"] }}</div>
              <div class="unit">家</div>
            </div>
          </div>
          <div class="item">
            <div class="circle" style="background-color: #ff0000">监</div>
            <div class="info">
              <div class="type">服务监管</div>
              <div class="number">{{ fourTypeData["监督"] }}</div>
              <div class="unit">家</div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-container equ">
        <div class="equ-card" style="height: 100%">
          <div class="title">承压设备</div>
          <div class="equ-info">
            <div
              class="img"
              :class="(equSelected == '气瓶' ||equMouseOn=='气瓶')? 'active' : 'in-active'"
              @click="equChange('气瓶')"

            >
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/qp0.png"
                @mouseover="imgActive('气瓶')"
                v-if="this.equSelected != '气瓶'&&this.equMouseOn!='气瓶'"
              />
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/qp1.png"
                @mouseleave="imgInActive('气瓶')"
                v-if="this.equSelected == '气瓶'||this.equMouseOn=='气瓶'"
              />
              <div class="title" style="left: 50px">气瓶</div>
            </div>
            <div class="num-info">
              <div class="info-row">
                <div class="type">设备数量</div>
                <div class="number">460350</div>
                <div class="unit">台</div>
              </div>
              <div class="info-row">
                <div class="type">使用单位</div>
                <div class="number">1568</div>
                <div class="unit">家</div>
              </div>
              <div class="info-row">
                <div class="type">制造企业</div>
                <div class="number">434</div>
                <div class="unit">家</div>
              </div>
            </div>
          </div>
          <div class="equ-info">
            <div
              class="img"
              :class="(equSelected == '锅炉' ||equMouseOn=='锅炉')? 'active' : 'in-active'"
              @click="equChange('锅炉')"

            >
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/gl0.png"
                @mouseover="imgActive('锅炉')"
                v-if="this.equSelected != '锅炉'&&this.equMouseOn!='锅炉'"
              />
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/gl1.png"
                @mouseleave="imgInActive('锅炉')"
                v-if="this.equSelected == '锅炉'||this.equMouseOn=='锅炉'"
              />
              <div class="title" style="left: 50px">锅炉</div>
            </div>
            <div class="num-info">
              <div class="info-row">
                <div class="type">设备数量</div>
                <div class="number">301</div>
                <div class="unit">台</div>
              </div>
              <div class="info-row">
                <div class="type">使用单位</div>
                <div class="number">172</div>
                <div class="unit">家</div>
              </div>
              <div class="info-row">
                <div class="type">制造企业</div>
                <div class="number">106</div>
                <div class="unit">家</div>
              </div>
            </div>
          </div>
          <div class="equ-info">
            <div
              class="img ahct"
              :class="(equSelected == '氨合成塔' ||equMouseOn=='氨合成塔')? 'active' : 'in-active'"
              @click="openUrl('氨合成塔');equChange('氨合成塔');"
            >
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/ahct0.png"
                @mouseover="imgActive('氨合成塔')"
                v-if="this.equSelected != '氨合成塔'&&this.equMouseOn!='氨合成塔'"
              />
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/ahct1.png"
                @mouseleave="imgInActive('氨合成塔')"
                v-if="this.equSelected == '氨合成塔'||this.equMouseOn=='氨合成塔'"
              />
              <div class="title" style="left: 35px">氨合成塔</div>
            </div>
            <div class="num-info">
              <div class="info-row">
                <div class="type">设备数量</div>
                <div class="number">1</div>
                <div class="unit">台</div>
              </div>
              <div class="info-row">
                <div class="type">使用单位</div>
                <div class="number">1</div>
                <div class="unit">家</div>
              </div>
              <div class="info-row">
                <div class="type">制造企业</div>
                <div class="number">1</div>
                <div class="unit">家</div>
              </div>
            </div>
          </div>
          <div class="equ-info">
            <div
              class="img"
              :class="(equSelected == '焦炭塔' ||equMouseOn=='焦炭塔')? 'active' : 'in-active'"
              @click="openUrl('焦炭塔');equChange('焦炭塔');"
            >
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/jtt0.png"
                @mouseover="imgActive('焦炭塔')"
                v-if="this.equSelected != '焦炭塔'&&this.equMouseOn!='焦炭塔'"
              />
              <img
                width="100px"
                height="100px"
                src="../../../assets/homepage_image/jtt1.png"
                @mouseleave="imgInActive('焦炭塔')"
                v-if="this.equSelected == '焦炭塔'||this.equMouseOn=='焦炭塔'"
              />
              <div class="title" style="left: 40px">焦炭塔</div>
            </div>
            <div class="num-info">
              <div class="info-row">
                <div class="type">设备数量</div>
                <div class="number">1</div>
                <div class="unit">台</div>
              </div>
              <div class="info-row">
                <div class="type">使用单位</div>
                <div class="number">1</div>
                <div class="unit">家</div>
              </div>
              <div class="info-row">
                <div class="type">制造企业</div>
                <div class="number">1</div>
                <div class="unit">家</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts/map/js/china.js";
import Highcharts from "highcharts/highstock";
import { mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      equSelected: "", // 当前选中的设备
      equMouseOn: "", // 鼠标当前指向的设备
      geoChart: null,
      fourTypeData: {
        检验: 0,
        用户: 0,
        制造: 0,
        监督: 0,
      },
    };
  },
  async created() {
    // 初始化地图
    this.initMap();
    this.imgActive(this.equTypeName);
    this.equChange(this.equTypeName)
  },
  computed:{
    ...mapGetters(["equType","equTypeName"]),

  },
  methods: {
    // 鼠标移动到设备图片上时，改变图片颜色
    imgActive(equ) {
      this.equMouseOn = equ;
    },
    imgInActive(equ) {
      this.equMouseOn = "";
    },
    equChange(equ) {
      this.equSelected = equ;
      this.getMapDataAndSet(equ);
      this.getFourTypeDataAndSet(equ);
      this.changeEquType(equ);
    },
    // 初始化地图
    async initMap() {
      this.setMapData([]);
    },
    // 获取检用制监四类数据并设置
    async getFourTypeDataAndSet(equ) {
      switch (equ) {
        case "起重机械":
          this.fourTypeData = {
            检验: 3,
            用户: 1999,
            制造: 399,
            监督: 4,
          };
          break;
        case "气瓶":
          this.fourTypeData = {
            检验: 89,
            用户: 1568,
            制造: 434,
            监督: 21,
          };
          break;
        case "电气控制柜":
          this.fourTypeData = {
            检验: 1,
            用户: 1,
            制造: 1,
            监督: 0,
          };
          break;
        case "储罐":
          this.fourTypeData = {
            检验: 1,
            用户: 23,
            制造: 30,
            监督: 0,
          };
          break;
        case "锅炉":
          this.fourTypeData = {
            检验: 3,
            用户: 172,
            制造: 106,
            监督: 20,
          };
          break;
        case "氨合成塔":
          this.fourTypeData = {
            检验: 1,
            用户: 1,
            制造: 1,
            监督: 1,
          };
          break;
        case "焦炭塔":
          this.fourTypeData = {
            检验: 1,
            用户: 1,
            制造: 1,
            监督: 1,
          };
          break;

        default:
          this.fourTypeData = {
            检验: 0,
            用户: 0,
            制造: 0,
            监督: 0,
          };
          break;
      }
    },

    // 获取设备地图数据并设置
    async getMapDataAndSet(equ) {
      let data = [];
      switch (equ) {
        case "起重机械":
          data = [
            { name: "上海", value: 2 },
            { name: "北京", value: 54 },
            { name: "安徽", value: 3063 },
            { name: "山东", value: 3783 },
            { name: "河北", value: 8 },
            { name: "重庆", value: 30 },
            { name: "陕西", value: 1 },
          ];
          break;
        case "气瓶":
          data = [
            { name: "山东", value: 455449 },
            { name: "安徽", value: 4901 },
          ];
          break;
        case "电气控制柜":
          data = [{ name: "安徽", value: 30 }];
          break;
        case "储罐":
          data = [
            { name: "山东", value: 3 },
            { name: "江苏", value: 35 },
            { name: "浙江", value: 33 },
            { name: "河北", value: 24 },
            { name: "北京", value: 2 },
            { name: "海南", value: 2 },
            { name: "内蒙古", value: 4 },
            { name: "湖南", value: 5 },
            { name: "澳门", value: 6 },
            { name: "天津", value: 6 },
            { name: "青海", value: 7 },
            { name: "辽宁", value: 9 },
            { name: "广东", value: 10 },
          ];
          break;
        case "锅炉":
          data = [
            { name: "安徽", value: 236 },
            { name: "山东", value: 50 },
            { name: "江苏", value: 1 },
            { name: "浙江", value: 7 },
            { name: "河南", value: 2 },
            { name: "河北", value: 2 },
            { name: "吉林", value: 1 },
            { name: "甘肃", value: 1 },
            { name: "山西", value: 1 },
          ];
          break;
        case "氨合成塔":
          data = [{ name: "安徽", value: 1 }];
          break;
        case "焦炭塔":
          data = [{ name: "江苏", value: 1 }];
          break;
        default:
          break;
      }
      this.setMapData(data);
    },
    // 设置地图数据
    async setMapData(data) {
      const yData = [];
      // const barData = []
      // for (var i = 0; i < data.length; i++) {
      //   // barData.push(data[i])
      //   // yData.push(i + data[i].name)
      // }
      const option = {
        title: [
          {
            show: false,
            text: "",
            textStyle: {
              color: "#2D3E53",
              fontSize: 18,
            },
            right: 300,
            top: 50,
          },
        ],
        tooltip: {
          show: true,
          formatter: function (params) {
            if (!params.data) return;
            return params.name + "：" + params.data["value"] + "台";
          },
        },
        visualMap: {
          show: true,
          type: "continuous",
          orient: "horizontal",
          itemWidth: 10,
          itemHeight: 80,

          showLabel: true,
          seriesIndex: [0],
          min: 0,
          max: 4000,
          inRange: {
            color: ["#6FCF6A", "#FFFD64", "#FF5000"],
          },
          textStyle: {
            color: "#7B93A7",
          },
          bottom: 30,
          left: "left",
        },
        grid: {
          right: 10,
          top: 135,
          bottom: 100,
          width: "20%",
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          type: "category",
          inverse: true,
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: "#ddd",
            },
          },
          axisLabel: {
            interval: 0,
            margin: 85,
            textStyle: {
              color: "#455A74",
              align: "left",
              fontSize: 14,
            },
            rich: {
              a: {
                color: "#fff",
                backgroundColor: "#FAAA39",
                width: 20,
                height: 20,
                align: "center",
                borderRadius: 2,
              },
              b: {
                color: "#fff",
                backgroundColor: "#4197FD",
                width: 20,
                height: 20,
                align: "center",
                borderRadius: 2,
              },
            },
            formatter: function (params) {
              if (parseInt(params.slice(0, 1)) < 3) {
                return [
                  "{a|" +
                    (parseInt(params.slice(0, 1)) + 1) +
                    "}" +
                    "  " +
                    params.slice(1),
                ].join("\n");
              } else {
                return [
                  "{b|" +
                    (parseInt(params.slice(0, 1)) + 1) +
                    "}" +
                    "  " +
                    params.slice(1),
                ].join("\n");
              }
            },
          },
          data: yData,
        },
        geo: {
          // roam: true,
          map: "china",
          left: "left",
          right: "0",
          // layoutSize: '80%',
          label: {
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            emphasis: {
              areaColor: "#fff464",
            },
          },
        },
        series: [
          {
            name: "mapSer",
            type: "map",
            roam: false,
            geoIndex: 0,
            label: {
              show: false,
            },
            data: data,
          },
        ],
      };
      setTimeout(() => {
        this.gasGeoChart = echarts.init(
          document.getElementById("geo-graph-homepage")
        );
        this.gasGeoChart.setOption(option);
      }, 0);
    },
    changeEquType(equ) {
      // store内切换设备类型用的是首字母缩写
      let type = "";
      switch (equ) {
        case "起重机械":
          type = "qzj";
          break;
        case "电气控制柜":
          type = "dqkg";
          break;
        case "储罐":
          type = "yycg";
          break;
        case "焦炭塔":
          type = "jtt";
          break;
        case "锅炉":
          type = "dzgl";
          break;
        case "气瓶":
          type = "ydqp";
          break;
        case "氨合成塔":
          type = "ahct";
          break;
        default:
          break;
      }
      this.$message({
        message: "已切换为设备: " + equ,
        type: "success",
      });
      this.setEquType(type);
    },
    // 打开氨合成塔页面
    openUrl(type) {
      switch (type) {
        case "氨合成塔":
          window.open("http://139.129.231.153/ahct/index2.aspx", "_blank");
          break;
        case "焦炭塔":
          window.open("http://139.129.231.153/jtt/", "_blank");
          break;
        default:
          break;
      }
    },
    ...mapMutations({
      setEquType: "SET_EQUTYPE",
    }),
  },
};
</script>

<style lang="less" scoped>
div.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("../../../assets/bg.jpg"); // 设置背景图片
  div.header {
    // 头部
    width: 100%;
    height: 12%;
    border-bottom: 1px dashed white;
    margin-bottom: 20px; // 与下方容器保持距离
    display: flex;
    flex-direction: row;
    justify-content: center; // 水平居中
    align-items: center; // 垂直居中
    div.title {
      color: white;
      font-size: 42px;
      font-weight: 600;
    }
  }
  div.body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    div.col-container {
      display: flex;
    }
    div.col-container.equ {
      // 左右两列设备数量容器
      width: 20%;
      height: 100%;
      display: flex;
      flex-direction: column;
      div.equ-card {
        // 设备数量卡片
        display: flex;
        flex-direction: column;
        align-items: center; // 水平居中
        border: 3px solid #13295f;
        // border-radius: 1%;
        margin-top: 30px;
        margin-bottom: 40px;
        padding-bottom: 30px;

        div.title {
          // 卡片标题
          color: #00fa71;
          font-size: 42px;
          font-weight: 600;
          margin-top: 10px;
        }
        div.equ-info {
          // 单个设备信息
          display: flex;
          flex-direction: row;
          margin-top: 40px;
          div.img {
            // 设备图片容器
            display: flex;
            flex-direction: column;
            position: relative;

            padding-bottom: 40px;
            padding-left: 25px;
            padding-right: 25px;
            padding-top: 10px;
            div.title {
              // 图片标题
              position: absolute;
              width: 100px;
              font-size: 20px;
              bottom: 10px;
            }
          }
          div.img.active {
            // 活跃状态图片容器
            border: 2px solid #ffff6b;
            border-radius: 10%;
            div.title {
              color: #ffff6b;
            }
          }
          div.img.in-active {
            // 非活跃状态图片容器
            border: 2px solid #4cbcc1;
            border-radius: 10%;
            div.title {
              color: #4cbcc1;
            }
          }
          div.num-info {
            // 设备数量信息
            display: flex;
            flex-direction: column;
            justify-content: center;
            div.info-row {
              width: 200px;
              display: flex;
              flex-direction: row;
              font-size: 23px;
              margin-top: 7px;
              margin-bottom: 7px;
              margin-left: 20px;
              div.type {
                color: white;
              }
              div.number {
                color: #65ffab;
              }
              div.unit {
                color: white;
              }
            }
          }
        }
      }
    }
    div.col-container.map {
      // 中间地图容器
      width: 55%;
      height: 100%;
      display: flex;
      flex-direction: column;
      //   border: 1px solid red;
      align-items: center;
      div.map-card {
        // 地图卡片
        // margin-top: 10px;
        width: 100%;
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      div.btns-card {
        // 按钮卡片
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        height: 20%;
        div.item {
          display: flex;
          flex-direction: row;
          width: 20%;
          height: 100%;
          align-items: center;
          div.circle {
            height: 70px;
            width: 70px;
            color: white;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
            font-size: 32px;
            // background-color: greenyellow;
          }
          div.info {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-items: center;
            align-content: center;
            width: 50%;
            margin-left: 10px;
            div.type {
              width: 100%;
              font-size: 23px;
              color: white;
            }
            div.number {
              font-size: 23px;
              color: #65ffab;
              margin-left: 10px;
              margin-right: 10px;
            }
            div.unit {
              font-size: 23px;
              color: white;
            }
          }
        }
      }
    }
  }
}
div.ahct {
  &:hover {
    cursor: pointer;
  }
}
</style>